<nav class="omv-display-flex omv-flex-row omv-align-items-center omv-align-content-center omv-justify-content-start">
  <a routerLink="/"
     class="mat-subheading-2"
     [ngClass]="{'active': !breadcrumbs.length}"
     matTooltip="{{ 'Home' | transloco }}">
    <mat-icon svgIcon="{{ icon.home }}"></mat-icon>
  </a>
  <div *ngFor="let breadcrumb of breadcrumbs; let last = last">
    <mat-divider vertical="true"></mat-divider>
    <a *ngIf="!last"
       [routerLink]="breadcrumb.url"
       class="mat-subheading-2"
       [ngClass]="{'loading': breadcrumb.loading}">
      <span *ngIf="!breadcrumb.loading">{{ breadcrumb.text | transloco }}</span>
      <mat-icon *ngIf="breadcrumb.loading"
                class="omv-icon-rotate-360-infinite"
                svgIcon="mdi:loading">
      </mat-icon>
    </a>
    <a *ngIf="last"
       class="mat-subheading-2 active"
       [ngClass]="{'loading': breadcrumb.loading}">
      <span *ngIf="!breadcrumb.loading">{{ breadcrumb.text | transloco }}</span>
      <mat-icon *ngIf="breadcrumb.loading"
                class="omv-icon-rotate-360-infinite"
                svgIcon="mdi:loading">
      </mat-icon>
    </a>
  </div>
</nav>
